<template>
  <!-- 根div -->
  <!-- //设置了容器 -->
  <div class="login_container" ref="containerRef">
    <!-- //表单信息，登录块 -->
    <div class="login_box">
      <!-- log区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" />
      </div>

      <!-- 表单区域,格式要和element版本对应  -->
      <el-form
        :model="loginForm"
        :rules="loginRules"
        class="login_form"
        label-width="0"
        ref="loginFormRef"
      >
        <!-- 用户名,label="Activity name" -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="iconfont icon-yonghuming"
          />
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont icon-mima"
            type="password"
          />
        </el-form-item>

        <!-- 按钮 ,并且用class统一设置样式-->
        <el-form-item class="btns">
          <el-button type="primary" @click="handleSubmit">登录</el-button>
          <el-button type="info" @click="handleReset">重置</el-button>
          <el-button type="success" @click="goToRegister">注册</el-button>
        </el-form-item>
      </el-form>
      <div class="links">
        <div class="link-item">
          <!-- 使用 ::v-deep 进行样式穿透 -->
          <router-link to="/about" class="link">关于我们</router-link>
        </div>
        <div class="link-item">
          <!-- 使用 ::v-deep 进行样式穿透 -->
          <router-link to="/contact" class="link">联系我们</router-link>
        </div>
        <div class="link-item">
          <!-- 使用 ::v-deep 进行样式穿透 -->
          <router-link to="/faq" class="link">常见问题</router-link>
        </div>
        <div class="link-item">
          <!-- 使用 ::v-deep 进行样式穿透 -->
          <!-- <router-link to="/test" class="link">测试</router-link> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { ElForm, ElFormItem, ElInput, ElButton } from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import axios from "axios";

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup() {
    const containerRef = ref(null);
    const loginForm = reactive({
      username: "admin",
      password: "123456",
      role: "",
    });
    const loginRules = reactive({
      username: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { min: 3, max: 10, message: "长度在3-10个字符", trigger: "blur" },
      ],
      password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 3, max: 10, message: "长度在3-10个字符", trigger: "blur" },
      ],
    });
    // 引用
    const app = getCurrentInstance().appContext.config.globalProperties;
    const loginFormRef = ref(null);
    const isSubmitting = ref(false); // 添加一个变量来跟踪是否正在提交表单

    // 表单提交验证,将超过验证规则的返回false,正确的为ture
    async function handleSubmit() {
      // 如果表单正在提交中，直接返回，避免重复提交
      if (isSubmitting.value) {
        return;
      }

      // 将表单提交状态设为true，表示正在提交中
      isSubmitting.value = true;

      try {
        // 验证表单的输入是否合法
        const valid = await loginFormRef.value.validate();
        if (!valid) {
          // 如果表单输入不合法，直接返回，不继续后续操作
          return;
        }

        // 向后端发送登录请求
        const response = await axios.post("/login", loginForm);
        const res = response.data;
        if (res.flag === "ok") {
          // 登录成功

          // 使用Element Plus的消息提示组件显示成功信息
          app.$message.success("登录成功");

          // 将用户信息存储到sessionStorage中
          window.sessionStorage.setItem("user", JSON.stringify(res.user));
          if (res.user.role == "超级管理员") {
            // 跳转到Home页面
          app.$router.push({ path: "/home" });
          } else {
            // 员工页面
            app.$router.push({path: "/employee" });
          }
          
        } else {
          // 登录失败

          // 使用Element Plus的消息提示组件显示失败信息
          app.$message.error("登录失败");
        }
      } catch (error) {
        // 如果发生错误，打印错误信息
        console.error("erro");
      } finally {
        // 重置提交状态，将表单提交状态设为false，表示提交结束
        isSubmitting.value = false;
      }
    }
    // 处理按键事件的方法
    function handleKeyDown(event) {
      // 检查按下的键是否是回车键（键码为13）
      if (event.keyCode === 13) {
        // 当按下回车键时调用handleSubmit函数
        handleSubmit();
      }
    }

    // 表单信息重置
    const handleReset = () => {
      // console.log('成功重置');
      loginForm.username = "";
      loginForm.password = "";
    };
    // 注册按钮点击事件
    const goToRegister = () => {
      // 直接进行路由跳转
      app.$router.push("/sigin");
    };

    // 窗口可视化，浏览器布局的大小
    onMounted(() => {
      const viewportHeight = window.innerHeight;
      containerRef.value.style.height = `${viewportHeight}px`;
    });

    return {
      goToRegister, // 返回register函数
      containerRef, // 根div的引用
      loginForm, // 登录表单数据
      loginRules, // 登录表单验证规则
      loginFormRef, // 表单引用
      handleSubmit, // 提交表单处理函数
      handleReset, // 重置表单处理函数
    };
  },
};
</script>
<!-- 全局样式设计 -->
<style lang="less" scoped>
// 导入了全局设置样式
@import "../assets/css/global.css";

// 设置了背景颜色
// 根节点样式,全覆盖
.login_container {
  // background-color: #2b4b6b;
  background-image: url("../assets/login.png");
  background-size: cover;
  background-position: center;
}

// 设置form表单容器样式
.login_box {
  width: 30%;
  height: 70%;
  border-radius: 3px;
  position: absolute;
  /* 使用绝对定位 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 居中对齐 */
}

//设置log区域样式
.avatar_box {
  width: 100px;
  height: 100px;
  border: 1px solid #eee;
  border-radius: 50%; //圆角
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0ee;
}

// 设置图标大小位置
img {
  width: 100%;
  height: 100%;
  border-radius: 50%; //圆角
  background-color: #eee;
}

// 设置按钮的部件
.btns {
  display: flex; //使其内部的子元素能够使用 Flexbox
  justify-content: flex-end; //将子元素在主轴上（水平方向）末尾对齐通过这些样式，你可以实现将按钮容器水平地对齐到容器的末尾
}

// 设置表单布局
.login_form {
  position: absolute; //绝对定位
  bottom: 10%;
  width: 100%;
  padding: 0% 10px;
  box-sizing: border-box; //元素的盒模型为 border-box，使内边距和边框不会增加元素的总宽度。
}

// 设置链接部分的样式
.links {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 2%;
  width: 100%;
}

.link-item {
  margin: 0 10px;
}

/* 使用 ::v-deep 进行样式穿透 */
::v-deep .link-item a {
  color: #00ff3c;
  text-decoration: underline;
}
</style>
<!-- 现在通过使用 ::v-deep 我们成功地对 router-link 中的链接样式进行了修改。记住，在 Vue 3.x 中，如果你在样式中要修改组件的子组件样式，你可以使用 ::v-deep 或 /deep/ 进行样式穿透。 -->






